<template>
	<view class="panel">
		<h2 class="title">今日推荐</h2>
		<view class="body">
			<!--<view class="header">
				<view class="section left">
					<img class="text-img" src="https://img.js.design/assets/img/65d6ef91bc5f4c20179c8af3.png#181fd0fc7a2eec9408c13090591f8023" alt="">
				</view>
				<view class="section center">
					<text class="center-text">——主推商品——</text>
				</view>
				<view class="section right">
					<img class="text-img" src="https://img.js.design/assets/img/65d6ef91bc5f4c20179c8af3.png#181fd0fc7a2eec9408c13090591f8023" alt="">
				</view>
			</view>-->
			<view class="product">
				<view class="left" @click="sheep.$router.go('/pages/goods/index', { id: state.product.left.id })">
					<img class="img" :src="sheep.$url.cdn(sheep.$url.cdn(state.product.left.pic))"
					     alt="">
					<text class="title">{{ state.product.left.name }}</text>
					<text class="price">{{ state.product.left.price }}日元</text>
				</view>
				<view class="right">
					<view class="top" @click="sheep.$router.go('/pages/goods/index', { id: state.product.top.id })">
						<view class="top-left">
							<img class="top-left-img" :src="sheep.$url.cdn(sheep.$url.cdn(state.product.top.pic))"
							     alt="">
						</view>
						<view class="top-right">
							<text class="top-right-title">{{ state.product.top.name }}</text>
							<text class="top-right-price">{{ state.product.top.price }}日元</text>
						</view>
					</view>
					<view class="bottom" @click="sheep.$router.go('/pages/goods/index', { id: state.product.bottom.id })">
						<view class="bottom-left">
							<img class="bottom-left-img" :src="sheep.$url.cdn(sheep.$url.cdn(state.product.bottom.pic))"
							     alt="">
						</view>
						<view class="bottom-right">
							<text class="bottom-right-title">{{ state.product.bottom.name }}</text>
							<text class="bottom-right-price">{{ state.product.bottom.price }}日元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
import sheep from "@/sheep";
import {onLoad} from "@dcloudio/uni-app";
import {reactive} from "vue";

const state = reactive({
	product: {
		left: {},
		top: {},
		bottom: {},
	}
})

onLoad(() => {
	getList();
});

async function getList() {
	let hotRes = await sheep.$api.order.channelList({ type: 'default_search_key' });
	console.log(hotRes)
	const res = await sheep.$api.goods.list({ search: hotRes[0].dictValue }, { page: 1, size: 3 });
	const { content } = res;
	state.product.left = content[0];
	state.product.top = content[1];
	state.product.bottom = content[2];
	console.log(state.product)
}
</script>

<style scoped lang="scss">
.panel {
	display: flex;
	flex-direction: column;
	justify-content: left;
	width: 100%;
	background-color: #FFFFFF;
	//padding: 10rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx ;
	box-shadow: 1px 1px 20px #ececec;
	border-radius: 20rpx;


	.title {
		border-left: 5rpx solid #FE000F;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx;
	}
}

.body {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	width: 94.5%;
	height: 280px;
	opacity: 1;
  box-shadow: 1px 1px 20px #ffd5d5;
	margin-left: 0.8%;
	border-radius: 10px;
	//background: rgb(245, 122, 122);
	//background: linear-gradient(to left,rgb(245, 122, 122), rgb(245, 134, 134), rgb(243, 143, 143));
	background-image: url("https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/08/31ed62dc39cfe049ca810f6934866d8df41725110950809.png");
	background-size: cover;
	padding: 30rpx 2% 2%;

	.header {
		display: flex;
		justify-content: center; /* 改为居中以便更好的控制 */
		align-items: center;
		width: 100%; /* 确保header占满整个宽度 */

		.section {
			display: flex;
			align-items: center;
			justify-content: center; /* 默认居中对齐，对于特殊的section将在下面覆盖 */

			&.left {
				margin-top: 5px;
				margin-right: 15px;
				justify-content: flex-end; /* 左侧图片紧靠文本 */
				flex: 1; /* 确保占满剩余空间 */
			}

			&.right {
				margin-top: 5px;
				margin-left: 15px;
				justify-content: flex-start; /* 右侧图片紧靠文本 */
				flex: 1; /* 确保占满剩余空间 */
			}

			&.center {
				flex: 0; /* 确保文本部分不伸展 */
			}

			.text-img {
				width: 58px;
				height: 27.75px;
				opacity: 1;
			}

			.center-text {
				font-size: 20px;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				white-space: nowrap; /* 阻止文字换行 */
			}
		}
	}

	.product {
		display: flex;
		margin-top: 20rpx; // 主推商品下面的间隔
		border-radius: 10px;
		overflow: hidden; // 保证子元素不超出边界

		.left, .right {
			border-radius: 10px;
			height: auto; // 根据内容调整高度
		}

		.top-right-title, .bottom-right-title, .title {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; // 限制显示的行数为2
			overflow: hidden; // 隐藏超出部分
			text-overflow: ellipsis; // 超出部分显示省略号
			word-wrap: break-word; // 允许单词在必要时断行
			overflow-wrap: break-word; // 确保长单词能够断行，避免溢出
			max-height: 2.6em; // 根据行高和行数调整最大高度，确保只显示两行
		}


		.left {
			background-color: white; // 设置背景颜色为白色
			flex: 3;
			margin-right: 20rpx; // 与右侧商品的间隔
			height: 445rpx;
			display: flex;
			flex-direction: column;
			padding: 2rpx;
			padding-top: 5rpx;

			.img {
				flex: 3;
				width: 300rpx;
				height: 300rpx;
				margin: 10rpx auto 0;
				border-radius: 20rpx;
				opacity: 1;
			}

			.title {
				flex: 1;
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 20.27px;
				word-wrap: break-word; // 长单词或URL内部断行，防止溢出
				overflow-wrap: break-word; // 提高兼容性
				overflow: hidden; /* 隐藏溢出的文本 */
				text-overflow: ellipsis; /* 使用省略号表示溢出 */
				color: rgba(0, 0, 0, 1);
				text-align: center;
				vertical-align: top;
			}

			.price {
				flex: 1;
				font-size: 18px;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 30.06px;
				word-wrap: break-word; // 长单词或URL内部断行，防止溢出
				overflow-wrap: break-word; // 提高兼容性
				color: rgba(255, 145, 145, 1);
				text-align: center;
				vertical-align: top;
			}
		}

		.right {
			background: rgb(245, 122, 122);
			flex: 3;
			display: flex;
			flex-direction: column; // 使得.top和.bottom垂直堆叠

			.top, .bottom {
				border-radius: 10px;
				background-color: white; // 设置背景颜色为白色
				flex: 1; // 让.top和.bottom平分空间
				margin-bottom: 20rpx; // 设置顶部和底部的间隔
				height: 50rpx;
				display: flex;
        padding: 5rpx;
			}

      .top {
        .top-left {
          .top-left-img {
	          width: 150rpx;
	          height: 190rpx;
	          margin: 5rpx;
	          border-radius: 20rpx;
          }
        }
        .top-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between; // 新增，确保内容分布在顶部和底部
          padding: 10rpx; // 根据需要添加padding以调整布局
          height: 100%; // 确保占满父容器的高度

          .top-right-title {
            // 保持原样或根据需要进行调整
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 20.27px;
            color: rgba(0, 0, 0, 1);
	          word-wrap: break-word; // 长单词或URL内部断行，防止溢出
	          overflow-wrap: break-word; // 提高兼容性
	          overflow: hidden; /* 隐藏溢出的文本 */
	          text-overflow: ellipsis; /* 使用省略号表示溢出 */
            text-align: left;
            vertical-align: top;
          }

          .top-right-price {
            // 无需改变字体样式
            font-size: 15px;
            margin-bottom: 50rpx;
            font-weight: 400;
            letter-spacing: 0;
	          word-wrap: break-word; // 长单词或URL内部断行，防止溢出
	          overflow-wrap: break-word; // 提高兼容性
	          overflow: hidden; /* 隐藏溢出的文本 */
	          text-overflow: ellipsis; /* 使用省略号表示溢出 */
            line-height: 20.06px;
            color: rgba(255, 145, 145, 1);
            text-align: left;
            margin-top: auto; // 新增，推动到底部
          }
        }

      }

			.bottom {
        .bottom-left {
          .bottom-left-img {
	          width: 150rpx;
	          height: 190rpx;
	          margin: 5rpx;
	          border-radius: 20rpx;
          }
        }
        .bottom-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between; // 新增，确保内容分布在顶部和底部
          padding: 10rpx; // 根据需要添加padding以调整布局
          height: 100%; // 确保占满父容器的高度

          .bottom-right-title {
            // 保持原样或根据需要进行调整
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 20.27px;
            color: rgba(0, 0, 0, 1);
            text-align: left;
            vertical-align: top;
          }

          .bottom-right-price {
            // 无需改变字体样式
            font-size: 15px;
            margin-bottom: 50rpx;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 26.06px;
            color: rgba(255, 145, 145, 1);
            text-align: left;
            margin-top: auto; // 新增，推动到底部
          }
        }
			}
		}
	}

}
</style>
